<template>
  <div style="height: 100%; width: 100%">
    <OptionTitle
      :title="translate('hotProduct')"
      :sub-title="`${translate('maxAdd')}${9}${translate('gxm')}`"
    />
    <el-form label-width="auto" class="mt20">
      <el-form-item :label="translate('mhsl')" class="mb5">
        <el-radio
          v-for="item in rowNumList"
          :key="item.key"
          v-model="content.rowNum"
          :label="item.key"
          @change="changeConfig"
        >{{ item.value }}</el-radio>
      </el-form-item>
      <el-form-item :label="translate('showContent')" class="mb5">
        <el-checkbox-group v-model="showContent" @change="changeConfig">
          <el-checkbox
            v-for="item in paramList"
            :key="item.key"
            :label="item.key"
          >{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="translate('showRules')" class="mb5">
        <el-radio
          v-for="item in ruleList"
          :key="item.key"
          v-model="venueContent.rule"
          :label="item.key"
          @change="changeConfig"
        >{{ item.value }}</el-radio>
      </el-form-item>
    </el-form>
    <div v-if="venueContent.rule === '2'" class="side">
      <el-button icon="el-icon-plus" @click="openDrawer">{{
        translate("tianjia")
      }}</el-button>
      <Draggable
        v-model="venueContent.customList"
        class="list"
        @end="dragSuccess"
      >
        <div
          v-for="(item, index) in venueContent.customList"
          :key="item.id"
          class="item"
        >
          <img class="img" :src="item.icon" alt="">
          <img class="drag" src="@/assets/icon/drag.png" alt="">
          <div class="del_wrap" @click="customItemDel(index)">
            <i color="#FDEBE8" class="el-icon-delete" />
          </div>
        </div>
      </Draggable>
    </div>

    <el-drawer
      :title="translate('hotProductAdd')"
      :visible.sync="isShowDrawer"
      size="50%"
    >
      <div class="drawer_wrap">
        <div>
          <el-checkbox-group v-model="checkedList" class="drawer_list">
            <div v-for="item in hotProject" :key="item.id" class="item">
              <el-checkbox :key="item.id" :label="item.id">{{
                item.nameTemp
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>

      <div class="drawer_bottom">
        <div class="separate" />
        <el-button
          v-preventReClick
          type="primary"
          class="ml20"
          @click="customSub"
        >{{ translate("tj") }}</el-button>
        <el-button @click="isShowDrawer = false">{{
          translate("cancel")
        }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import OptionTitle from '../../../components/optionTitle.vue'
import { getProjectList } from '@/api'
export default {
  components: {
    OptionTitle,
    Draggable
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramList: [],
      ruleList: [],
      rowNumList: [],
      content: {},
      venueContent: {},
      hotProject: [],
      checkedList: [],

      showContent: [], // 显示内容 暂存

      isShowDrawer: false,

      contentTemp: {},
      venueContentTemp: {},
      showContentTemp: []
    }
  },
  created() {
    this.paramList = [...this.config.paramList]
    this.ruleList = [...this.config.ruleList]
    this.rowNumList = [...this.config.rowNumList]
    this.content = { ...this.config.content }
    this.venueContent = { ...this.config.venueContent }
    if (this.content.param) {
      this.showContent = this.content.param.split(',')
    }

    this.contentTemp = JSON.parse(JSON.stringify(this.config.content))
    this.venueContentTemp = JSON.parse(JSON.stringify(this.config.venueContent))
    if (this.content.param) {
      this.showContentTemp = JSON.parse(JSON.stringify(this.content.param.split(',')))
    }
  },
  methods: {
    dragSuccess() {
      this.changeConfig()
    },
    indexSub() {
      const fn = () => {
        if (this.venueContent.rule === '1') {
          this.venueContent.customList = null
        }
      }
      fn()
    },
    handleSelectionChange() { },
    changeConfig() {
      const { content, contentTemp, showContent, showContentTemp, venueContent, venueContentTemp } = this
      this.content.param = this.showContent.join(',')
      // if (this.venueContent.rule === '1') {
      //   this.venueContent.customList = null
      // }
      const obj = {
        venueContent: {
          customList: this.venueContent.customList
        },
        content: this.content
      }
      let count = 0
      if (showContent.join(',') !== showContentTemp.join(',')) {
        count++
      }
      if (content.rowNum !== contentTemp.rowNum) {
        count++
      }
      if (venueContent.rule !== venueContentTemp.rule) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.id).join(',') !== venueContentTemp.customList.map(i => i.id).join(',')) {
        count++
      }
      this.$store.dispatch('app/changeMiniFlag', {
        code: 'hotItemsFlag',
        flag: count > 0
      })
      this.$bus.$emit('miniHotItemsChange', this.venueContent.rule, obj)
    },
    // ruleClick(val) {
    //   if (val === '1') {
    //     this.venueContent.customList = null
    //   }
    //   const obj = {
    //     venueContent: {
    //       customList: this.venueContent.customList
    //     },
    //     content: this.content
    //   }
    //   this.$bus.$emit('miniHotItemsChange', val, obj)
    // },
    customSub() {
      const { hotProject, checkedList } = this
      const temp = []
      const checkItemList = []
      hotProject.forEach(item => {
        checkedList.forEach(i => {
          if (i === item.id) {
            item.icon = item.showProjectPictures
            item.title = item.projectName || ''
            checkItemList.push(item)
          }
        })
      })
      checkItemList.forEach(item => {
        if (temp.findIndex(i => i.id === item.id) > -1) {
          return
        } else {
          temp.push(item)
        }
      })
      if (temp.length > this.config.maxNum) {
        return this.$message.warning(`${this.translate('maxAdd')}${this.config.maxNum}${this.translate('gxm')}`)
      }
      this.venueContent.customList = temp
      this.changeConfig()
      this.isShowDrawer = false
    },
    customItemDel(i) {
      const temp = [...this.venueContent.customList]
      temp.splice(i, 1)
      this.venueContent.customList = temp
      this.changeConfig()
    },
    getHotProject() {
      getProjectList({
        param: {
          status: '1',
          isRec: '1',
          // type: '0',
          venueId: this.config.venueId
        }
      }).then(res => {
        this.hotProject = res.recordList || []
        this.hotProject.forEach(item => {
          item.nameTemp = item.projectName
          if (item.projectName && item.projectName.length > 10) {
            item.nameTemp = item.projectName.slice(0, 12) + '...'
          }
        })
      })
    },
    openDrawer() {
      this.searchSlideTitle = ''
      if (this.venueContent.customList && this.venueContent.customList.length > 0) {
        this.checkedList = this.venueContent.customList.map(item => item.id)
      } else {
        this.checkedList = []
      }
      this.getHotProject()
      this.isShowDrawer = true
    },
    closeDrawer() { }
  }
}
</script>

<style lang="scss" scoped>
.side {
  height: calc(100% - 200px);
  overflow: auto;
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item {
      margin-right: 20px;
      margin-bottom: 20px;
      width: 100px;
      height: 115px;
      position: relative;
      border: 1px solid #dfe2e8;
      cursor: pointer;
      &:hover {
        .del_wrap {
          display: block;
        }
      }
      .img {
        width: 100%;
        height: 100%;
      }
      .del_wrap {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 0 0 0 4px;
        text-align: center;
        background-color: #fdebe8;
        color: #ee3821;
        font-size: 12px;
        cursor: pointer;
      }
      .drag {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
.drawer_list {
  height: calc(100% - 60px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 220px;
    height: 60px;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #dfe2e8;
    margin: 5px;
    display: flex;
    align-items: center;
  }
}
.drawer_wrap {
  height: calc(100% - 100px);
  overflow: auto;
}
.drawer_bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  padding-bottom: 20px;
  background-color: #fff;
  z-index: 1000;
  .separate {
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #dfe2e8;
  }
}
</style>
